<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="<c:url value='/image/system/logo.ico'/>" type="image/x-icon"/>
<%@ include file="/WEB-INF/include/head.basic.jsp"%>
<title>用户注册</title>
<style>
body { 
padding-top: 70px; 
font-family:"Hiragino Sans GB","Microsoft YaHei","微软雅黑",tahoma,arial,simhei,"黑体";
}
</style>
<script type="text/javascript">
//验证邮箱
function checkEmail(email){
	var reg=/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
	return reg.test(email);
}
//验证手机号
function checkPhone(phone){
	var reg=/^(0|86|17951)?(13[0-9]|15[012356789]|18[0-9]|14[57])[0-9]{8}$/;
	return reg.test(phone);
}
</script>

<script type="text/javascript">
$(function(){
	//定义 邮箱、密码、验证码、服务条款、提示样式
	$('#emailInput').popover({
		placement:'top',//提示框显示在顶部
		html:true,//内容格式为html
		trigger:'manual'//用户 自定义
	});
	$('#kaptchaInputDiv').popover({
		placement:'top',
		html:true,
		trigger:'manual'
	});
	$('#readCheckbox').popover({
		placement:'top',
		html:true,
		trigger:'manual'
	});
	$('#pwdBody').popover({
		placement:'top',
		html:true,
		trigger:'manual'
	});
	//提交表单
	$('#submitBtn').click(function(){
		//验证邮箱或手机号
	    if(!(checkEmail($('#email').val()) || checkPhone($('#email').val()))){
	    	$('#emailInput').attr('data-content','<p style="color:red;">请输入正确邮箱或手机号！</p>');
			$("#emailInput").popover('show');
			window.setTimeout("$('#emailInput').popover('hide');",5000);
			return false;
	    }
		//验证密码
	    if($('#exampleInputPassword1').val()==''){
	    	$('#pwdBody').attr('data-content','<p style="color:red;">请设置密码！</p>');
			$("#pwdBody").popover('show');
			window.setTimeout("$('#pwdBody').popover('hide');",5000);
			return false;
	    }
		//验证验证码是否为空
		if($('#kaptchaInput').val()==''){
			$('#kaptchaInputDiv').attr('data-content','<p style="color:red;">验证码不能为空！</p>');
			$("#kaptchaInputDiv").popover('show');
			window.setTimeout("$('#kaptchaInputDiv').popover('hide');",5000);
			return false;
		}
		//是否接受服务协议
		if(!document.getElementById('readId').checked){
			$('#readCheckbox').attr('data-content','<p style="color:red;">您必须接受《用户服务协议》才能注册！</p>');
			$("#readCheckbox").popover('show');
			window.setTimeout("$('#readCheckbox').popover('hide');",5000);
			return false;
		}
		//判断验证码的正确性
		$.ajax({
			type:'post',
			data:{'kaptchaInput':$('#kaptchaInput').val()},
			url:'checkKaptcha',
			dataType:'text',
			success:function(data){
			   if(data=='false'){
			    $('#kaptchaInputDiv').attr('data-content','<p style="color:red;">验证码错误！</p>');
			    $("#kaptchaInputDiv").popover('show');
				window.setTimeout("$('#kaptchaInputDiv').popover('hide');",5000);
			   }else{
				   //校验邮箱可用性
				   $.ajax({
						type:'POST',
						data:{'username':$('#email').val()},
						url:'checkUsername',
						dataType:'text',
						success:function(data){
							if(data=='false'){
								$('#emailInput').attr('data-content','<p style="color:red;">该邮箱已注册，请更换邮箱！</p>');
								$("#emailInput").popover('show');
								window.setTimeout("$('#emailInput').popover('hide');",5000);
							}else{
								$('#form1').submit();
							}
						}
					});
			   }	
			}
		});
	});
	//更换验证码
	$('#changeKaptcha').click(function(){
		 $('#kaptchaImage').attr('src', '<c:url value='/kaptcha.jpg'/>?' + Math.floor(Math.random()*100) );
	});
	
});
</script>
</head>
<body>
 <div id="navbar-top" class="navbar-top navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a href="/" class="navbar-brand" style="padding-top:0px;">
       <img alt="" src="<c:url value="/image/system/logo.png"/>" style="width:140px;height:50px;"/>
      </a>
    </div>
  </div>
</div>
<div class="container" style="margin-top:30px;">
    <div class="col-sm-offset-1 col-sm-6">
      <div id="carousel-ad" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
           <li data-target="#carousel-ad" data-slide-to="0" class="active"></li>
           <li data-target="#carousel-ad" data-slide-to="1"></li>
           <li data-target="#carousel-ad" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
           <div class="item active">
             <img src="<c:url value="/image/ad/1.jpg"/>">
             <div class="carousel-caption">广告一</div>
           </div>
           <div class="item">
             <img src="<c:url value="/image/ad/2.jpg"/>">
             <div class="carousel-caption">广告二</div>
           </div>
           <div class="item">
             <img src="<c:url value="/image/ad/3.jpg"/>">
             <div class="carousel-caption">广告三</div>
           </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="panel panel-default">
      <div class="panel-body">
         <form:form modelAttribute="user" action="saveRegisterInfo" id="form1">
           <div class="form-group" style="text-align:center;margin:0 auto;">
             <label style="color: #f60;text-align: left;font-weight: 400;font-size: 26px;height: 82px;line-height: 82px;margin-bottom: 5px;padding: 0 30px;">新用户 ，注册 </label>
           </div>
           <div class="form-group" id="emailInput" data-container="body">
             <form:input type="email" path="username" class="form-control input-lg" id="email"  placeholder="请输入常用邮箱或手机号"/>
           </div>
           <div class="form-group" id="pwdBody" data-container="body">
             <form:input type="password" path="password" class="form-control input-lg" id="exampleInputPassword1" placeholder="请输入密码"/>
           </div>
           <div class="form-group" >
             <table>
               <tr>
                 <td id="kaptchaInputDiv" data-container="body"><input type="text" class="form-control input-lg" name="kaptchaInput" id="kaptchaInput" style="width:130px;" value=""></td>
                 <td>&nbsp;&nbsp;<img src="<c:url value='/kaptcha.jpg'/>" id="kaptchaImage" style="width:100px;height:30px;"/></td>
                 <td>&nbsp;&nbsp;<a href="#" id="changeKaptcha">换一张</a></td>
               </tr>
             </table>
           </div>
           <div class="form-group">
             <p><button type="button" class="btn btn-warning btn-lg" style="width:100%;height:100%;" id="submitBtn">免费注册</button></p>
           </div>
           <div class="checkbox" id="readCheckbox" data-container="body">
             <label>
               <input type="checkbox" id="readId">我已阅读并同意<a href="#" style="color:black;">《用户服务协议》</a>
             </label>
           </div>
         </form:form>
      </div>
      <div class="panel-footer">
        <label style="">已有账号?&nbsp;&nbsp;直接&nbsp;&nbsp;<a href="#">登录>></a></label>
      </div>
    </div>
    </div>
</div>
</body>
</html>